<template>
  <div class="form1">
    <div class="mobile">
      <input type="text" :class="{'phoneErr': phoneErrorMessage}" placeholder="手机号" v-model="phone"
             @input="resetPhoneErr">
      <div class="phoneErrMessage">{{ phoneErrorMessage }}</div>
    </div>
    <div class="code flex-between">
      <input type="text" :class="{'error': errorMessage}" placeholder="短信验证码" v-model="code" @input="resetError">
      <div
        :class="{'codeNum': true, 'primary': btnStatus && countDownTime === '获取验证码', 'cp': btnStatus && countDownTime === '获取验证码', 'na': !btnStatus || countDownTime !== '获取验证码'}"
        @click="getPhoneCode">{{ countDownTime }}
      </div>
      <div class="errorMessage">{{ errorMessage }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 当前路由
      routeName: this.$route.name
    }
  },
  computed: {
    // 注册手机号
    phone: {
      get () {
        if (this.routeName === 'signUp') {
          return this.$store.state.register.phone
        } else {
          return this.$store.state.findPassword.phone
        }
      },
      set (val) {
        if (this.routeName === 'signUp') {
          this.$store.commit('register/set_phone', val)
        } else {
          this.$store.commit('findPassword/set_phone', val)
        }
      }
    },
    // 获取验证码按钮状态
    btnStatus () {
      return this.tools.validate.mobileValidate(this.phone)
    },
    // 获取手机验证码倒计时文本
    countDownTime () {
      return this.$store.state.common.countDownText
    },
    // 手机号下方错误提示
    phoneErrorMessage () {
      if (this.routeName === 'signUp') {
        return this.$store.state.register.phoneErrorMessage
      } else {
        return this.$store.state.findPassword.phoneErrorMessage
      }
    },
    // 验证码下方错误提示
    errorMessage () {
      if (this.routeName === 'signUp') {
        return this.$store.state.register.errorMessage
      } else {
        return this.$store.state.findPassword.errorMessage
      }
    },
    // 手机验证码
    code: {
      get () {
        if (this.routeName === 'signUp') {
          return this.$store.state.register.code
        } else {
          return this.$store.state.findPassword.code
        }
      },
      set (val) {
        if (this.routeName === 'signUp') {
          this.$store.commit('register/set_code', val)
        } else {
          this.$store.commit('findPassword/set_code', val)
        }
      }
    }
  },
  methods: {
    // 重置手机号下方错误提示
    resetPhoneErr () {
      if (this.phoneErrorMessage) {
        if (this.routeName === 'signUp') {
          this.$store.commit('register/set_phoneErrorMessage', '')
        } else {
          this.$store.commit('findPassword/set_phoneErrorMessage', '')
        }
      }
    },
    // 重置错误提示
    resetError () {
      if (this.errorMessage) {
        if (this.routeName === 'signUp') {
          this.$store.commit('register/set_errorMessage', '')
        } else {
          this.$store.commit('findPassword/set_errorMessage', '')
        }
      }
    },
    // 获取手机验证码
    getPhoneCode () {
      if (this.countDownTime === '获取验证码') {
        if (!this.tools.validate.mobileValidate(this.phone)) {
          return
        }
        if (this.routeName === 'signUp') {
          // this.$store.dispatch('register/getRegisterPhoneCode')
          this.$store.commit('common/set_showImgDialog', true)
          this.$store.commit('common/set_fnName', 'register/getRegisterPhoneCode')
          this.$store.commit('common/set_fnParams', {})
          this.$store.commit('common/set_imgCode', '')
        } else {
          this.$store.commit('common/set_showImgDialog', true)
          this.$store.commit('common/set_fnName', 'findPassword/getFindPasswordPhoneCode')
          this.$store.commit('common/set_fnParams', {})
          this.$store.commit('common/set_imgCode', '')
        }
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form1 {
  padding: 0 70px;

  input {
    height: 48px;
    border: 1px solid #d8dee9;
    border-radius: 2px;
    outline: none;
    padding-left: 16px;
    font-size: 16px;
    color: #0D172C;

    &::-webkit-input-placeholder {
      font-size: 16px;
      color: #9eaac4;
    }
  }

  .mobile {
    margin-bottom: 32px;
    position: relative;

    input {
      width: 400px;
    }

    .phoneErr {
      border-radius: 2px;
      border-color: #FF2929;
    }

    .phoneErrMessage {
      position: absolute;
      top: 52px;
      font-size: 12px;
      color: #FF2929;
    }
  }

  .code {
    margin-bottom: 32px;
    position: relative;

    input {
      width: 268px;
    }

    .error {
      border-radius: 2px;
      border-color: #FF2929;
    }

    .codeNum {
      width: 120px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      border: 1px solid #d8dee9;
      border-radius: 2px;
      color: #5f7196;
      font-weight: 400;
      font-size: 16px;
    }

    .primary {
      border-color: #304EEC;
      color: #304EEC
    }

    .errorMessage {
      position: absolute;
      top: 52px;
      font-size: 12px;
      color: #FF2929;
    }
  }
}
</style>
